Thanks for joining me in this lecture.
We're going to take a look at how to create a loading screen.
Thankfully, making a loading screen is actually quite easy.
And I've attached this guy to the lecture, so you'll want to go ahead and grab it so we can go ahead
and move forward.
Now, in order to create a loading screen, we're going to need a script, a local script to execute.
As soon as the player joins the game.
How can we do this?
Well, this is where the replicated first service comes into play.
This service is virtually the first service, hence it's called Replicated first.
It's the first service to load when a player joins the game and any local scripts that are in replicated
first will run immediately.
That means we can use it for our loading screen.
So I'm going to create a local script inside of Replicated first and we can take our loading guy and
make it a child of the script.
Now, inside of our script, we're going to need a few things.
We're going to need some services, some variables.
We will need one constant.
And then we'll just need a main section to house all of our running code.
Now, what are these services we're going to need?
Well, one of the services we'll need is called the Content Provider Service.
And this service allows us to preload any kind of assets into our game.
The next service we'll need is the player service.
And then we will need the tween service.
That way we can tween our GUI.
Because if we actually go back to our loading guy, my plan here.
Is that while we're loading all these things in our game, I'm going to display the name of whatever
thing in our game we are loading and I'm going to have this bar inside of our GUI.
This bar will slowly increase the closer we get to loading all of the assets in our game.
So let's go ahead and create a table.
I'm going to call this table assets.
And these are going to be every single asset that we need to load in our game.
How do we get all the assets in our game?
Well, it's quite simple.
We just use the game keyword and then we just get every single descendant that is in our game just like
that.
We'll also need to create a reference to our guy, but we're going to be cloning our guy and we're going
to be putting our guy inside of the player's player guy folder so we can clone the guy and just call
it clone guy equal to script.
And we reference the loading guy or the.
When we actually put it down in there.
It looks like I moved the wrong thing into the loading guy.
My bad.
So we're going to reference the loading guy.
And we're going to clone it and the parent of our clone is going to be equal to players.
We're going to get the local player and get their player GUI folder.
The constant will need here is a constant for our loading screen.
I'll just call it loading string and it's just going to say loading just like that.
And now we can get started.
So what we need to do is we need to loop through every single asset in our game and load it.
So for every single asset in our game in the Ipairs table assets, what we'll do is we're going to use
the content provider service and the service has a function called preload async and it says yields
until all of the assets associated with the given instances or content strings have loaded.
So we have to pass a table to this function and this table contains any assets we need to load into
our game.
And the asset we're just going to load here is the one that we're currently looping at.
So we'll create this table, this new table here and just put our asset inside of it.
Once we do this, we need to set the size of the loading bar that is in our GUI.
And since we're going to be scaling it across the x axis, we need to calculate exactly what percentage
along the x axis our loading bar needs to be at.
And that's very easy.
We can just create a variable called X scale and it can be equal to I write the current asset we're
on.
Let's say we're at number one divided by the total number of assets and that'll give us a fraction.
So if we're one out of 60 assets, then you know, that's 1/60.
So that bar will only represent, you know, 1/60 out of the total distance the bar will travel.
So we can do clone GUI, get the frame that is in the GUI, this frame right here.
And let me just open it up so you can see everything.
And then we get the loading bar outline and then the loading bar.
We need to set the size equal to a new udim to.
It's going to have that X scale.
We just calculated zero on the offset.
The Y scale is going to be equal to.
Let me actually just copy this.
Put that in there and get the size along the y axis and scale and then zero for the Y offset.
And then we need to set.
I believe the asset name label dot text equal to the loading string and we'll concatenate it with the
name of the asset that we're loading right now.
So asset.name.
Once we do this, I'm just going to yield for one frame.
That way this doesn't go super fast.
And then we can check if the current asset we're loading is equal to the total number of assets.
So if we're at the last asset, then what I want to do is I want to wait for, let's say one second
and then once that one second is up, then we can tween our GUI to fade away.
How can we do that?
Well, what we're going to do is we're going to loop through every single UI element that is inside
of our GUI.
So clone gui git descendants.
What we're going to do is we're going to check if this element is a frame.
If the element is a frame, then we need to set the transparency of the background to one.
If it's a text label, we need to set the text transparency to one.
So tween service, we're going to create a new tween on this element.
We'll just do tween info.new 0.5 seconds and the background transparency for this frame will be equal
to one, and then we can just play the tween.
And then we'll copy this.
And we need to do the same thing for a text label.
So if this element is a text label.
Then what we'll do is we'll set the text transparency to one instead of the background transparency,
and we'll play it as well.
Then, because calling this function doesn't yield.
We're just going to wait for 0.5 seconds.
And then once that's done, we can destroy this clone guy and then we can destroy this script as well.
That way we clear up memory because we're storing every single descendant in our game in a table here,
which will take up quite a bit of memory.
So we're just going to destroy the script and destroy the guy so it's no longer on the screen.
And guess what?
That's it.
That's all we need to do for our script.
So if we go and test our game out, we should get a nice loading screen.
So there we go.
It's going.
It's still going pretty fast.
It's telling us all the things that it's loading in our game.
And as you can see, our loading bar is slowly moving along as we're loading more and more things in
our game, such as services and all of this stuff that's being displayed here and eventually it's done.
The joy fades out and we're all good to go.
Now, I did see that.
This UI stroke.
Ah, we should probably account for the UI stroke that is on the outline as well.
So we could do else if element is a UI stroke.
Then we can do the exact same thing.
But instead we're just going to set the transparency because a stroke only has a transparency property.
So if we try it again.
Everything should fade out nicely.
And there we are.
That is it.
It is that simple to create a loading in our game.
Now, if you like this guy to appear on top of every single other guy in your game, then you can just
set this display order number here to be something super high.
The higher the number, the higher precedence it takes and will display over anything else on your screen.
So set it to some super randomly high number and it will always display above everything else in your
game.
Other than that, I hope you enjoyed this lecture.